<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css">
    <link rel="stylesheet" type="text/css" href="../../css/api.css">
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/previewImage.js"></script>
</head>

<body style="background-color:  #ff9f00;">
    <header class="aui-bar aui-bar-nav">
        <span class="aui-pull-left aui-iconfont aui-icon-left" onclick="closeFrame();"></span>
        <div class="aui-title">帖子详情</div>
    </header>
    <section class="aui-content-padded aui-margin-t-10" id="postInfo">

    </section>

    <div class="aui-grid aui-margin-t-10">
        <div class="aui-row">
            <div class="aui-col-xs-4">
                <div class="aui-tab_assessment" id="tab">
                    <div class="aassessment-item aui-active">全部评论</div>
                </div>
            </div>
        </div>
    </div>

    <div class="aui-card-list" id="comment">

    </div>

</body>
<script type="text/javascript">
    apiready = function() {
        var photoBrowser = api.require('photoBrowser');
        var arr = new Array();
        /* 当点击回复未提交评论而点关闭窗口时，关闭输入框 */
        window.closeFrame = function() {
            var UIChatBox = api.require('UIChatBox');
            UIChatBox.close();
            api.closeFrame();
        }

        startAjax();

        function startAjax() {
            var tieid = api.pageParam.postinfo;
            var id = api.pageParam.id;
            var token = $api.getStorage('token')
            var body = {
                token: token,
                tieid: tieid,
                id: id
            };
            api.ajax({
                url: 'http://www.mk517.com/webApi/postInfo.php',
                method: 'post',
                dataType: 'json',
                "headers": {
                    "Content-Type": "application/json"
                },
                data: {
                    body: body
                }
            }, function(ret, err) {
                if (ret) {
                    src = ret.post_picture;
                    (ret.post_picture != null && ret.post_picture != '') ? imgAddress = '<div onclick="previewImg()" style="width:auto;height:auto;"><img src="' + ret.post_picture +
                        '" id="picture1" style="width:auto;height:auto;max-width:100%;max-height:100%;"></div>': imgAddress = '';
                    $api.byId('postInfo').innerHTML = '<div class="aui-card-list">' +
                        '<div class="aui-card-list-header aui-card-list-user aui-border-b">' +
                        '<div class="aui-card-list-user-avatar">' +
                        '<img id="postInfo_user_avater" src="' + ret.post_user_avater + '" class="aui-img-round" />' +
                        '</div>' +
                        '<div class="aui-card-list-user-name">' +
                        '<div id="postInfo_user_name">' + ret.post_username + '</div>' +
                        '<div class="aui-card-list-user-info">2017-10-18</div>' +
                        '</div>' +
                        '</div>' +
                        '<div class="aui-card-list-content-padded">' +
                        '<p id="post_goods_content">' + ret.post_goods_content + '</p>' +
                        imgAddress +
                        '</div>' +
                        '<div class="aui-card-list-content aui-margin-t-15">' +
                        // '<img id="postInfo_pic" src="' + ret.postInfo_autograph + '" />' +
                        // '<p id="postInfo_content">' + ret.postInfo_content + '</p>' +
                        '</div></div></div>'
                        // alert(JSON.stringify(ret));
                } else {
                    // alert(JSON.stringify(err));
                }
            });

            api.ajax({
                url: 'http://www.mk517.com/webApi/postInfos.php',
                method: 'post',
                dataType: 'json',
                "headers": {
                    "Content-Type": "application/json"
                },
                data: {
                    body: body
                }
            }, function(ret, err) {
                if (ret) {
                    if (ret.info == "false") {} else {
                        for (var i = 0; i < ret.length; i++) {
                            var data = ret[i];
                            arr.push(data.comm_id);
                            (data.comm_parent_id != '0') ? str = '&nbsp;回复&nbsp;<span style="color:#0000E3;">' + data.comm_bname + '</span>&nbsp;:': str = ':';
                            $api.byId('comment').innerHTML += '<div id="ele" class="aui-margin-t-10 aui-card-list-header aui-card-list-user aui-border-b" style="border:1px solid #e3e3e3;width:auto;height:auto;">' +
                                '<div class="aui-card-list-user-name">' +
                                '<div style="width:200px;color:#0000E3;font-size:14px;">' + data.comm_name + '<p style="color:#000;">' + str + '' + data.comm_content + '</p></div>' +
                                '<span class="aui-pull-right" style="color:#0000E3" onclick="reply(' + data.comm_id + ',' + data.comm_uid + ');">回复</span>' +
                                '</div>' +
                                '</div>';
                        }
                    };

                } else {
                    //alert(JSON.stringify(err));
                }
            });
        }

        /*
         *原生JS实现插入字段
         */
        // function insertText(username, reusername, content, id, i, child_id, comm_id, str) {
        //     var para = document.createElement('div');
        //     var str_1 = 'str' + i;
        //     para.setAttribute('id', str_1);
        //     para.innerHTML = '<div id="ele" class="aui-margin-t-10 aui-card-list-header aui-card-list-user aui-border-b" style="border:1px solid #e3e3e3;width:auto;height:auto;">' +
        //         '<div class="aui-card-list-user-name">' +
        //         '<div style="width:200px;color:#0000E3;font-size:16px;">' + username + '<p style="color:#000;">&nbsp;回复&nbsp;<span style="color:#0000E3;">' + reusername + '</span>&nbsp;:' + content + '</p></div>' +
        //         '<span class="aui-pull-right" style="color:#0000E3" onclick="reply(' + id + ',' + i + ',' + comm_id + ',' + child_id + ');">回复</span>' +
        //         '</div>' +
        //         '</div>';
        //     var element = $api.byId(str);
        //     element.appendChild(para);
        // }

        window.reply = function(comm_id, comm_uid) {
            //alert(id);
            UIChatBox = api.require('UIChatBox');
            UIChatBox.open({
                placeholder: '说点什么。。。',
                autoFocus: true,
                maxRows: 2,
                emotionPath: 'widget://image/emotion',
                texts: {
                    sendBtn: {
                        title: '发送'
                    }
                },
                styles: {
                    inputBar: {
                        borderColor: '#d9d9d9',
                        bgColor: '#f2f2f2'
                    },
                    inputBox: {
                        borderColor: '#B3B3B3',
                        bgColor: '#FFFFFF'
                    },
                    emotionBtn: {
                        normalImg: ''
                    },
                    indicator: {
                        target: 'both',
                        color: '#c4c4c4',
                        activeColor: '#9e9e9e'
                    },
                    sendBtn: {
                        titleColor: '#0000E3',
                        bg: '#ffffff',
                        titleSize: 16
                    }
                }
            }, function(ret, err) {
                if (ret) {
                    if (ret.eventType == 'send') {
                        var tieid = api.pageParam.postinfo;
                        var id = api.pageParam.id;
                        var token = $api.getStorage('token');
                        var msg = ret.msg;
                        var body = {
                            token: token,
                            comm_id: comm_id,
                            tieid: tieid,
                            msg: msg,
                            comm_uid: comm_uid,
                            id: id
                        };

                        api.ajax({
                            url: 'http://www.mk517.com/webApi/comment.php',
                            method: 'post',
                            dataType: 'json',
                            "headers": {
                                "Content-Type": "application/json"
                            },
                            data: {
                                body: body
                            }
                        }, function(ret, err) {
                            //alert(JSON.stringify(ret));
                            if (ret) {
                                if (ret.info == 'true') {
                                    window.location.reload();
                                    UIChatBox.close();
                                }
                            } else {
                                //alert( JSON.stringify( err ) );
                            }
                        });

                    }
                } else {
                    //alert( JSON.stringify( err ) );
                }
            });
        };

        /*图片预览和下载*/
        window.previewImg = function() {
                photoBrowser.open({
                    images: [src],
                    //placeholderImg: 'widget://res/img/apicloud.png',
                    bgColor: '#000'
                }, function(ret, err) {
                    if (ret) {
                        if (ret.eventType == 'click') {
                            photoBrowser.close();
                            photoBrowser.clearCache();
                        } else if (ret.eventType == 'longPress') {
                            api.actionSheet({
                                cancelTitle: '取消',
                                buttons: ['保存到手机']
                            }, function(ret, err) {
                                if (ret) {
                                    if (ret.buttonIndex == 1) {
                                        var img_url = src;
                                        api.download({
                                            url: img_url,
                                            savePath: 'fs://image.jpg'
                                        }, function(ret, err) {
                                            //alert(ret.savePath);
                                            if (ret.state == 1) {
                                                api.saveMediaToAlbum({
                                                    path: ret.savePath
                                                }, function(ret, err) {
                                                    if (ret && ret.status) {
                                                        api.toast({
                                                            msg: '图片下载成功',
                                                            duration: 2000,
                                                            location: 'middle'
                                                        });
                                                    } else {
                                                        // alert( JSON.stringify( err ) );
                                                    }
                                                });

                                            } else {

                                            }
                                        });

                                    }
                                    //alert(ret.index);
                                    // alert( JSON.stringify( ret ) );
                                } else {
                                    // alert( JSON.stringify( err ) );
                                }
                            });

                        } else if (ret.eventType == 'loadImgFail') {
                            api.toast({
                                msg: '图片加载失败',
                                duration: 2000,
                                location: 'bottom'
                            });
                        }

                        //alert( JSON.stringify( ret ) );
                    } else {
                        //alert(JSON.stringify(err));
                    }
                });

            }
            /* 图片预览和下载功能结束 */

    }
</script>

</html>
